﻿<!DOCTYPE html>
<html>
<head>
    <title>jQuery BABY (Local) !!!!</title>
    <link href="Content/jqueryGrid/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="Content/jqueryGrid/jQueryUICssLocal.css" rel="stylesheet" type="text/css" />
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/globalize.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/jquery.tmpl.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/jquery.mousewheel-3.0.4.js" type="text/javascript"></script>
    

    <script src="Scripts/jqueryGrid/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.button.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.spinner.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.tooltip.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.menu.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.position.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dialog.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.selectable.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.observable.js" type="text/javascript"></script>    
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dataview.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dataviewlocal.js" type="text/javascript"></script> 
    <script src="Scripts/jqueryGrid/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.progressbar.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.grid.js" type="text/javascript"></script>
    
    

    <script src="Scripts/jqueryGrid/dataview-odata.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/pager.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid-filter.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid-sort.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid.selectable.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/navigator.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/localstore.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/helpers.js" type="text/javascript"></script>
    <script src="Scripts/jQueryUIExampleLocal.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    
    
    

    <script src="Scripts/jQueryUIExampleValidaton.js" type="text/javascript"></script>
    <script src="Scripts/jsrender.js" type="text/javascript"></script>
</head>
<body>
    <!--<div id="switcher"></div>-->
    <input id="city"/>
    <div id="dialog"><textarea id="messageDialog"></textarea></div>
<h2>jQuery UI Grid</h2>
<table id="customers-local">
    <caption>Customers Grid</caption>
   
    <thead>
        <tr>
            <th data-property="CustomerId">ID</th>
            <th data-property="FirstName">First Name</th>
            <th data-property="LastName">Last Name</th>
            <th data-property="Address">Address</th>
            <th data-property="City">City</th>
            <th data-property="PostalCode">Postal Code</th>
            <th data-property="State">State</th>
            <th data-property="Country">Country</th>
            <th data-property="Email">Email</th>
            <th data-property="Phone">Phone</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                <button id="refresh">Refresh</button>
                <span id="pager"></span>
            </td>
            <td colspan="2">
                <label for="pagesize">Pagesize</label>
                <select id="pagesize">
                    <option>10</option>
                    <option>20</option>
                    <option>30</option>
                </select>
            </td>
            <td colspan="4">
                Viewing rows <span class="paging-from">0</span> to <span class="paging-to">0</span> of <span class="paging-total">0</span>
            </td>
        </tr>
    </tfoot>
</table>

    <br/>
    <hr/>
    <br/>

    <table id="customers-selected">
        <caption>Selected Customer</caption>
        <thead>
            <tr>
                <th data-property="CustomerId">ID</th>
                <th data-property="FirstName">First Name</th>
                <th data-property="LastName">Last Name</th>
                <th data-property="Address">Address</th>
                <th data-property="City">City</th>
                <th data-property="PostalCode">PostalCode</th>
                <th data-property="State">State</th>
                <th data-property="Country">Country</th>
                <th data-property="Email">Email</th>
                <th data-property="Phone">Phone</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

   <div id="tools" class="tools">
        <button id="newCustomer">New Customer</button>
        <button id="editCustomer">Edit Customer</button>
        <button id="removeCustomer">Remove Customer</button>
        <button id="clearSelection">Clear selection</button>
    </div>
    <form id="editForm" title="Edit Customer">
        <div id="progressbarEdit"></div>
        <fieldset id="editFormFields">
            <legend>Edit Customer</legend>
        </fieldset>
        <input class="submit" type="submit" value="Save changes" />
    </form>
    
    <form id="newForm" title="New Customer">
        <div id="progressbarNew"></div>
        <fieldset id="newFormFields">
            <legend>New Customer</legend>
        </fieldset>
        <input class="submit" type="submit" value="Save changes" />
    </form>
    
    <script id="customerContact" type="text/x-jsrender">
       {{if $.isArray(value)}}
        <label>${label}</label>
        
        <ul>
            {{each(index, valueX) value}}
            <li><input type="text" class="ui-widget-content ui-corner-all" name="${name}" placeholder="${label}" value="${valueX}" title="${label}" /></li>
            {{/each}}
        </ul>
        {{else}}
        <label for="${name}">${label}</label>
        <input type="text" class="ui-widget-content ui-corner-all" id="${name}" name="${name}" placeholder="${label}" value="${value}" title="${label}" />
        {{/if}}
    </script>


    <script id="edit-tmpl" type="text/x-jquery-tmpl">
     {{if $.isArray(value)}}
        <label>${label}</label>
        
        <ul>
            {{each(index, valueX) value}}
            <li><input type="text" class="ui-widget-content ui-corner-all" name="${name}" placeholder="${label}" value="${valueX}" title="${label}" /></li>
            {{/each}}
        </ul>
        {{else}}
        <label for="${name}">${label}</label>
        <input type="text" class="ui-widget-content ui-corner-all" id="${name}" name="${name}" placeholder="${label}" value="${value}" title="${label}" />
        {{/if}}
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            jQueryExample.jQueryWireUp();
        })
    </script>

</body>
</html>